// SmarTest Studio - TemplateTab类

import { showNotification } from './utils.js';
import http from './http-client.js';

/**
 * TemplateTab类 - 负责管理模板标签页的功能
 */
export class TemplateTab {
    constructor() {
        // 绑定方法到实例
        this.loadTemplates = this.loadTemplates.bind(this);
        this.createProjectFromTemplate = this.createProjectFromTemplate.bind(this);
        this.filterTemplates = this.filterTemplates.bind(this);
    }
    
    /**
     * 加载模板列表
     */
    loadTemplates() {
        http.get('/api/templates?api=get_templates')
            .then((response) => {
                const templates = response.data.templates;
                const templatesGrid = document.getElementById('templatesGrid');
                templatesGrid.innerHTML = '';

                templates.forEach((template) => {
                    const card = document.createElement('div');
                    card.className = 'template-card';
                    card.innerHTML = `
                        <h3>${template.name}</h3>
                        <p>${template.description}</p>
                        <span class="category">${template.category}</span>
                    `;
                    card.addEventListener('click', () => {
                        this.createProjectFromTemplate(template.id);
                    });
                    templatesGrid.appendChild(card);
                });
            })
            .catch((error) => {
                console.error('加载模板失败:', error);
                showNotification('加载模板失败', 'danger');
            });
    }
    
    /**
     * 从模板创建项目
     * @param {string} templateId - 模板ID
     */
    createProjectFromTemplate(templateId) {
        // 实际应用中应该发送请求到后端创建项目
        console.log('从模板创建项目:', templateId);
        showNotification('正在创建项目...', 'info');
        
        // 模拟创建项目后跳转
        setTimeout(function() {
            window.location.href = '/project/1';
        }, 1000);
    }
    
    /**
     * 过滤模板
     * @param {string} searchTerm - 搜索关键词
     */
    filterTemplates(searchTerm) {
        const cards = document.querySelectorAll('.template-card');
        cards.forEach(function(card) {
            const cardText = card.textContent.toLowerCase();
            card.style.display = cardText.includes(searchTerm) ? '' : 'none';
        });
    }
}